<template>
    <div class="list">
      <div class="list_btn">
          <span :class="{active:b==index}" @click="huan(index)" v-for="(item,index) in btnArr" :key="index">{{item}}</span>
      </div>
      <div class="good_list">
          <div class="good" v-for="(item,index) in a?tuanArr:tuanArrone" :key="index">
              <div class="good_img">
                  <img :src="item.picture" alt="">
              </div>
              <div class="good_message">
                  <p><span>{{item.name}}</span>&nbsp;&nbsp;<span>{{item.dz}}</span></p>
                  <h3>{{item.jj}}</h3>
                  <div class="good_price">
                      <div class="price">
                          <span>{{item.unit}}</span><br>
                          <span>￥{{item.min_price}}</span><span>{{item.promotion_info}}</span><br>
                          <span style="color:#666">{{item.promotion_info}}</span>
                      </div>
                      <div class="good_btn">
                          <button @click="lingqu()">{{alter?'去使用':'马上抢'}}</button><br>
                          <span>{{item.month_saled_content}}份</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  let pic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Fc2fdfc039245d688d43ffa029c886a1ed21b0ef48e49&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270400&t=29502105e0bd1c6372024d09e644bda3"
  export default {
      data(){
          return { 
            // 用来存储index
              b:0,
            //   通过啊的值来转换列表的渲染
              a:true,
            //   顶部按钮列表
              btnArr:['正在抢购','上新预告'],
            //   定义变量用来改变商品按钮的值
            alter:false,
            c:0
          }
      },
      methods: {
          huan(index){
             this.b=index;
             this.a=true;
             if(index==1){
                this.a=false;
             }else if(index==0){
                this.a=true;
             }
          },
          lingqu(){
           
            this.alter=!this.alter;
          }      
        },
    //   通过props接收从父组件传来的值，该值只能读，不能写
      props:{
        tuanArr:{type:Array,default:[]},
        tuanArrone:{type:Array,default:[]},

      }
  }
  </script >
  
  <style lang="scss" scoped>
      .list{
          width: 95%;
          height: 75%;
          position: fixed;
          bottom: 0px;
          margin: 10px;
          box-sizing: border-box;
      }
      .list .list_btn{
          width: 100%;
          height: 40px;
      }
      
      .list .list_btn span{
          margin:0 30px 0 10px;
          display: inline-block;
          line-height: 40px;
          color: white;
      }
      .list .list_btn .active{
          font-weight: bold;
          color: rgb(4, 52, 52);
      }
      .good_list{
          width: 95%;
          height: 80%;
          margin: auto;
          background: #f3f3f3;
      }
      .good {
          width: 100%;
          height: 120px;
          display: flex;
          background: white;
          border-radius: 5px;
      }
      .good_img{
          width: 90px;
          height: 90px;
          background: #999;
          margin-top: 10px;
          margin-left: 5px;
      }
      .good_img img{
         width: 100%;
      }
      .good_message{
          width: 100%;
          margin-top: 10px;
          margin-left: 10px;
          font-size: 12px;
      }
      .good_message p span {
        font-size: 16px;
        font-weight: bold;
      }
     .good_message .good_price{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: red;
      }
      .good_message .good_price .price{
          line-height: 20px;
      }
  
      .good_message .good_price .price span:nth-child(3){
          font-size: 18px;
      }
      .good_message .good_price .price span:nth-child(4){
          display: inline-block;
          border: 1px solid red;
          font-size: 10px;
          text-align: center;
          line-height: 15px;
          margin-left: 5px;
      }
     
      .good_message .good_price .good_btn{
          line-height: 20px;
          margin-right: 5px;
      }
      .good_message .good_price .good_btn button{
          height: 30px;
          width: 80px;
          background: red;
          color: white;
          border-radius: 15px;
          border:none;
          margin-bottom: 5px;
      }
      .good_message .good_price .good_btn span{
          height: 30px;
          width: 80px;
          text-align: center;
          color: red;
          display: inline-block;
      }
  </style>> 
  
  </style>